var $ = layui.jquery;
layui.use(['form', 'layer', 'element', 'laytpl', 'dragsort', 'jquery', 'dropdown', 'rncontrol', 'drawer'], function () {
    var dropdown = layui.dropdown;
    var layer = layui.layer
        , element = layui.element
        , form = layui.form
        , laytpl = layui.laytpl
        , layer = layui.layer
        , drawer = layui.drawer
        , dragsort = layui.dragsort;
    if (flow_id) {

        refreshFlow();
    }
});

<!--S渲染设计区域-->
function DrawerView(res) {
    refreshFlow();
}

<!--E渲染设计区域-->

var _this;
var size = 1.0;

function zoomout() {
    if (size < 3) {
        size = size + 0.1;
        set();
    }
}

function zoomIn() {
    if (size >= 0.6) {
        size = size - 0.1;
        set();
    }
}

function set() {
    $("#box-all").css("transform", "scale(" + size + ")");
    $("#zoom_show").html(parseInt(size * 100) + "%");
}


function node_menu(node_id, obj) {
    _this = obj;
    let offsetTop = $(obj).offset().top;
    let offsetLeft = $(obj).offset().left;
    $("#addtooltip-warpper").attr("data-id", node_id)
    $("#addtooltip-warpper").css({"left": offsetLeft + 20, "top": offsetTop - 10, "margin-left": "30px"});
    $("#addtooltip-warpper").hide();
    $("#addtooltip-warpper").show(150)
}


function getContent(nodes) {
    var html = ''
    for (var i = 0; i < nodes.length; i++) {
        html += FlowTpl(nodes[i]);
        if (nodes[i]['children']) {
            html += getContent(nodes[i]['children']);
        }
    }
    return html;
}

function refreshFlow() {
    layui.rncontrol.RnAjax('/flow/flow/api/', 'post', 'json', {'id': num_id}, function (res) {
        var nodes = res.data.nodes;
        $(".flow_view").html(getContent(nodes));
    })
}


//页面滑动 新增角色框跟着滑动
$(".fd-nav-content").scroll(function () {
    let nowScrollTop = $(_this).offset().top - 10;
    if (!$("#addtooltip-warpper").is(":hidden")) $("#addtooltip-warpper").css("top", nowScrollTop)
});


function FlowTpl(node) {
    if (node.type == 0) {
        var background = "87, 106, 149";
    }
    if (node.type == 1) {
        background = "255, 148, 62";
    }
    if (node.type == 2) {
        background = "50, 150, 250";
    }
    if (node.type == 5) {
        return '<div class="end-node"><div class="end-node-circle"></div><div class="end-node-text">流程结束</div></div>';
    }
    var tpl = '';
    if (node.type == 3) {
        return tpl = TplWhere(node);
    }
    node.desc = node.desc || "请设置人员";

    tpl += '                <div class="node-wrap">';
    tpl += '                    <div class="node-wrap-box start-node ">';
    tpl += '                        <div class="title" style="background: rgb(' + background + ');">';
    tpl += '                            <i class="layui-icon layui-icon-username"></i>';
    tpl += '                            <span>' + node.title + '</span>';
    if (node.type != 0 && flow_id == '') {
        tpl += '                            <i class="layui-icon layui-icon-close btnRemove" onclick="FlowDel(' + node.id + ',' + node.pid + ',' + node.type + ');"></i>';
    }
    tpl += '                        </div>';
    tpl += '                        <div onclick="FlowEdit(' + node.id + ',' + node.type + ');" class="flow_edit_' + node.id + '">';
    tpl += '                            <span>' + node.desc + '</span>';
    tpl += '                            <i class="layui-icon layui-icon-right"></i>';
    tpl += '                        </div>';
    tpl += '                    </div>';

    tpl += '                    <!-- 朝下剪头 -->';
    tpl += '                    <div class="node-add-btn-box">';
    tpl += '                        <div class="add-node-btn">';
    if (flow_id == '') {
        tpl += '                           <button class="layui-btn layui-btn-normal" onclick="node_menu(' + node.id + ',this);">+</button>';
    }
    tpl += '                        </div>';
    tpl += '                    </div>';

    tpl += '                </div> ';
    return tpl;
}


function TplWhereList(node) {
    var tpl = '';
    var t = 0;

    for (var i = 0; i < node.length; i++) {
        var t = i + 1;
        node[i].desc = node[i].desc || "请设置条件";
        tpl += '<div class="col-box">';
        tpl += '                    <div class="condition-node">';
        tpl += '                        <div class="condition-node-box">';
        tpl += '                            <div class="auto-judge">';
        tpl += '                                <div class="title-wrapper">';
        tpl += '                                    <input type="text" class="form-control condition-input" value="' + node[i].title + '" placeholder="条件' + t + '">';
        tpl += '                                    <span>优先级' + t + '</span>';
        if (flow_id == '') {
            tpl += '                                    <i class="layui-icon layui-icon-close btnRemove"  onclick="FlowDel(' + node[i].id + ',' + node[i].pid + ',' + node[i].type + ');"></i>';
        }
        tpl += '                                </div>';
        tpl += '                                <div onclick="FlowEdit(' + node[i].id + ',' + node[i].type + ',' + t + ');"  class="flow_edit_' + node[i].id + '">';
        tpl += '                                    ' + node[i].desc + '';
        tpl += '                                </div>';
        tpl += '                            </div>';

        tpl += '                    <!-- 朝下剪头 -->';
        tpl += '                            <div class="node-add-btn-box">';
        tpl += '                                <div class="add-node-btn">';
        if (flow_id == '') {
            tpl += '                                    <button class="layui-btn layui-btn-normal" onclick="node_menu(' + node[i].id + ',this);">+</button>';
        }
        tpl += '                                </div>';
        tpl += '                            </div>';

        tpl += '                        </div>';
        tpl += '                    </div>  ';
        if (node[i]['children']) {
            tpl += getContent(node[i]['children']);
        }
        if (i == 0) {
            tpl += '                    <div class="top-left-cover-line"></div>';
            tpl += '                    <div class="bottom-left-cover-line"></div>';
        }
        if (t == node.length) {
            tpl += '                    <div class="top-right-cover-line"></div>';
            tpl += '                    <div class="bottom-right-cover-line"></div>';
        }
        tpl += '                </div>';
    }
    return tpl;
}

function TplWhere(node) {
    var tpl = '<div class="tplwhere">';
    tpl += '<div class="branch-wrap">';
    tpl += '                        <div class="branch-box-wrap">';
    tpl += '                            <div class="branch-box">';
    tpl += '                                <span class="add-branch" title="添加条件" onclick="FlowAdd(4,' + node.id + ');">添加条件</span>';
    tpl += TplWhereList(node.wherelist);
    tpl += '                            </div>';
    tpl += '                            <div class="node-add-btn-box">';
    tpl += '                                <div class="add-node-btn">';
    tpl += '                                    <button class="layui-btn layui-btn-normal" onclick="node_menu(' + node.id + ',this);">+</button>';
    tpl += '                                </div>';
    tpl += '                            </div>  ';
    tpl += '                        </div>';
    tpl += '                    </div>';
    tpl += '                </div>';

    return tpl;
}

function FlowAdd(type, pid = '') {
    var flow_id = 2;
    if (pid == "") {
        var pid = $("#addtooltip-warpper").attr("data-id");
    }
    layui.rncontrol.RnAjax('/flow/flow/FlowAdd/', 'post', 'json', {
        'type': type,
        'pid': pid,
        'flow_id': flow_id
    }, function (res) {
        if (res.code == 0) {
            $("#addtooltip-warpper").hide();
            refreshFlow();
        }

    })
}

function FlowDel(id, pid, type) {
    layer.confirm('确定删除该节点?', function (index) {
        layui.rncontrol.RnAjax('/flow/flow/FlowDel/', 'post', 'json', {
            'id': id,
            'pid': pid,
            'type': type
        }, function (res) {
            if (res.code == 0) {
                refreshFlow();
                layer.close(index);
            }
        })
    })
}

function FlowEdit(id, type, t = '') {
    if (flow_id) {
        return false;
    }
    layer.open({
        type: 2,
        title: '编辑节点',
        offset: 'rt',
        area: ['400px', '100%'],
        content: ["/flow/flow/FlowEdit/?id=" + id + "&type=" + type + "&t=" + t, 'no'],
    })
}

function SaveOk() {
    if (num_id == 0 || num_id == "") {
        layui.layer.msg('请先选择流程类别', {icon: 2});
        $(".drawer-right").click();
        return false;
    }
    layui.rncontrol.RnAjax('/flow/engine/SaveDesign/', 'post', 'json', {'flow_id': num_id}, function (res) {
        if (res.code == 0) {
            layui.layer.msg('保存成功！', {icon: 1});
            refreshFlow();
        } else {
            var list = res.data;
            for (var i = 0; i < list.length; i++) {
                $('.flow_edit_' + list[i].id).addClass('error_tip');
            }

            layui.layer.msg(res.msg, {icon: 2});
        }
    })


}







